import Taro, { Component, useState, useEffect } from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import Kind from '../../static/card/icon_kind.png';
import NumberIcon from '../../static/card/icon_number.png';
import classnames from 'classnames';

import './index.scss';


/**
 * 
 * @param {string} card 卡号
 * @param {string} sku 规格或者兑换对歌
 * @param {number} id id
 */
function CardMove({ card, sku, id }) {
  // let animation = null;
  const [ animation, setAnimation ] = useState(null);
  useEffect(() => {
    // animation = Taro.createAnimation({
    //   duration: 300,
    //   timingFunction: 'ease',
    //   delay: 0
    // });
    setAnimation(Taro.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
      delay: 0,
    }))
    // setAnimationData(animation.export());
  }, []);

  const [ animationData, setAnimationData ] = useState(null);

  const [ pageX, setPageX ] = useState(0);


    function handleTouchStart(e) {
      console.log('handleTouchStart');
      setPageX(e.touches[0].clientX);
    }

    function handleTouchEnd(e) {
      if (e.changedTouches.length === 1) {
        console.log(pageX, e.changedTouches[0].clientX, 21)
        if (pageX - e.changedTouches[0].clientX > 50) {
          // animation.translate(-70, 0).step();
          animation.left('-152rpx').step();
          setAnimationData(animation.export());
        } else if (e.changedTouches[0].clientX - pageX > 10) {
          console.log('false');
          animation.left(0).step();
          // animation.translate(0, 0).step();
          setAnimationData(animation.export());
          // setIsMove(false);
        }
        setPageX(0);
      }
    }

    function delteItem(e) {
      console.log('delete');
    }

    function funx() {
      console.log('funxfunxfunxfunx')
    }
    return (
      // <View className="card-item">
      <View onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd} className={classnames({
        "card-move": true,
      })}>
        <View className="card-line card" onClick={funx} animation={animationData}>
          <Image src={NumberIcon} alt="" className="icon" />
          <View>卡号：{card}</View>
        </View>
        <View className="card-line sku" animation={animationData}>
          <Image src={Kind} alt="" className="icon" />
          <View>规格：{sku}</View>
        </View>
        <View className="delete" onClick={delteItem}>删除</View>
      </View>
      // </View>
    )
}

export default CardMove;